<template>
  <div id="">
    <div v-if="isNone" class="nonelist">
      暂无房源数据
    </div>
    <div class="banner" v-else>
    <swiper :options="swiperOption">
    <swiper-slide v-for="(items,index) in houseList" :key="items.key">
      <router-link v-if="items.isOneself" :to="{ path: '/landlordHouseDetail', query: {
          houseId: items.houseId,
          lng:items.lng,
          lat:items.lat,

        }}">
      <!-- <img :src="items.housePic" alt=""> -->
      <div class="housePic" :style="{backgroundImage:'url(' + items.housePic + ')'}">

      </div>
      <div class="houseList-con">
        <p>{{items.title}}/{{items.roomNum}}室{{items.hallNum}}厅{{items.washroomNum}}卫</p>
        <span>&yen;{{(items.rentMoney/100).toFixed(2)}}元/月</span>
      </div>
    </router-link>
    <router-link v-else :to="{ path: '/houseDetail', query: {
        houseId: items.houseId,
        lng:items.lng,
        lat:items.lat,

      }}">
    <!-- <img :src="items.housePic" alt=""> -->
    <div class="housePic" :style="{backgroundImage:'url(' + items.housePic + ')'}">

    </div>
    <div class="houseList-con">
      <p>{{items.title}}/{{items.roomNum}}室{{items.hallNum}}厅{{items.washroomNum}}卫</p>
      <span>&yen;{{(items.rentMoney/100).toFixed(2)}}元/月</span>
    </div>
  </router-link>
    </swiper-slide>
    <div class="swiper-pagination" slot="pagination"></div>
    </swiper>
    <div class="jc"></div>
    </div>
  </div>
</template>
<script>

export default {
  name: "",
  props: ['houseList'],
  data: () => ({
    swiperOption: {
        pagination: {
          clickable: true,
        },
        slidesPerView: 1.5,
        spaceBetween: 10,
        freeMode: true,
        paginationClickable: true,
        loop: false,
        onTouchEnd: function() {
            swiper.startAutoplay()
        }
     },
     isNone:false,
     userInfo:'',
  }),
  components:{
  },
  mounted() {
    //do something after mounting vue instance
    let userInfo = JSON.parse(window.localStorage.getItem('userInfo'));
    this.userInfo = userInfo;
  },
  created() {
    // console.log(this.houseList);

  },
  updated: function () {
    this.$nextTick(() => {
      // Code that will run only after the
      // entire view has been re-rendered
      var houseList = this.houseList;
      console.log(houseList);
      if(houseList.length<1){
        this.isNone = true;
      }else{
        this.isNone = false;
      }
    })
  },
  methods: {
    linkHouseDetail(houseId) {
      console.log(houseId);
      let that = this;
      that.$router.push({name:'houseDetail',params:{houseId:houseId}})
    }
  }
}
</script>
<style lang="scss" scoped>

.banner{
  padding: 0;
  padding-left: 10px;
  .housePic{
    width: 100%;
    height: 200px;
    border-radius: 4px;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    border: 1px solid $eeeColor;
  }
}
.houseList-con{
  padding:10px;
  span{
    color: $blackColor;
    font-size: 18px;
  }
}
.nonelist{
  background: $eeeColor;
  margin: 10px;
  padding: 10px;
  color: $grayColor;
}


</style>
